.configuration {
  background-color: #fff;
  padding: 20px;
  height: 100%;
  overflow-y: auto;

  .homeBg {
    height: calc(100%);
    margin: auto;
  }

  .card-box {
    display: grid;
    grid-template-columns: repeat(4, 24%);
    row-gap: 20px;
    justify-content: space-between;

    .home-card {
      width: 100%;
      height: 170px;
      background-color: rgba(242, 242, 242, 1);
      border-radius: 5px;
      box-shadow: none;
      padding: 20px;

      &>h1:last-child {
        text-align: center;
        margin-top: 40px;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}





.configuration {
  .plus-card {
    background: #fff;
    border: 2px solid rgba(238, 238, 238, 0.42);
    padding: 10px;
    box-sizing: border-box;

    .ant-card {
      background: #F5F5F5;

      p {
        margin: 0;
        padding: 0;
      }

      .ant-card-head {
        border: none;
      }

      .ant-card-head-title {
        &>div {
          &>p {
            color: #999999;
          }

          .anticon {
            margin-left: 10px;
          }
        }
      }

      .card-important {
        color: #333333;

        &>span {
          font-size: 36px;
          font-weight: 600;
        }
      }
    }

    .ant-image {
      margin-left: 5px;
    }

    .card-hb-up {
      color: #E61717;
    }

    .card-hb-down {
      color: #52C41A;
    }

    .card-tb-up {
      color: #E61717;
    }

    .card-tb-down {
      color: #52C41A;
    }

    .card-num {
      margin: 0 5px;
    }
  }

  .plus-chart-line {
    background: #FFFFFF;
    border: 2px solid rgba(238, 238, 238, 0.42);
    padding: 15px;
    box-sizing: border-box;

    .plus-chart-line-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;

      .title {
        margin-right: 10px;
      }

      .date {
        color: #999999
      }
    }

    .plus-chart-line-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .content-left {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .ant-image {
          margin-right: 5px;
        }

        &>div:first-child {
          display: flex;
          align-items: flex-end;
          margin-right: 10px;

          &>div {
            display: flex;
            flex-direction: column;
            height: 70px;

            .content-time {
              color: #999;
              font-size: 14px;
            }
          }
        }

        .content-number {
          font-size: 36px;
          font-weight: bold;
          color: #333333;
        }

        .content-unit {
          font-size: 14px;
          color: #999;
        }

        .chart-content {
          display: flex;
        }

        .content-num {
          margin-left: 5px;
        }

        .content-up {
          &>span:first-child {
            font-size: 14px;
            color: #666666;
          }

          &>span:last-child {
            color: #E61717;
          }
        }

        .content-down {
          &>span:first-child {
            font-size: 14px;
            color: #666666;
          }

          &>span:last-child {
            color: #52C41A;
          }
        }
      }

      .content-right {

        .content-type,
        .content-unit {
          font-size: 14px;
          color: #666666;
        }

        .content-number {
          font-size: 18px;
          color: #333333;
          margin: 0 5px;
        }
      }
    }
  }

  .trapezoidal-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .trapezoidal-top,
    .trapezoidal-center,
    .trapezoidal-bottom {
      width: 200px;
      height: 40px;
      background: #FF688E;
      position: relative;

      .left {
        width: 0;
        height: 0;
        border-bottom: 40px solid #fff;
        border-left: 20px solid transparent;
        position: absolute;
        right: 0;
      }

      .right {
        width: 0;
        height: 0;
        border-bottom: 40px solid #fff;
        border-right: 20px solid transparent;
        left: 0;
      }
    }

    .trapezoidal-center {
      width: 160px;
      margin: 20px 0;
      background: #7D8DFE;
    }

    .trapezoidal-bottom {
      width: 120px;
      background: #4CD5E7;
    }
  }

  .grid-card {
    display: grid;
    grid-template-columns: repeat(4, 24%);
    justify-content: space-between;
    grid-row-gap: 20px;
  }

  .grid-chart {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    justify-content: space-between;
  }

  .to-do-list {
    border: 2px solid rgba(238, 238, 238, 0.42);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .ant-tabs {
      flex: 1;
    }

    .ant-tabs-content {
      height: 100%;

      .ant-tabs-tabpane {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }

    .tab-header {
      background: #f7f8fa;
      padding: 40px;
      margin-bottom: 20px;

      .tab-header-key {
        color: #666666;
        font-size: 14px;
        margin-right: 10px;
      }

      .tab-header-value {
        color: #E61717;
        font-size: 18px;
      }
    }
  }

  .plus-chart-funnel {
    border: 2px solid rgba(238, 238, 238, 0.42);
    padding: 15px;
    box-sizing: border-box;

    .funnel-header-title {
      &>div:first-child {
        margin-right: 15px;
      }

      .title {
        font-size: 16px;
        margin-right: 15px;
      }

      .date {
        color: #999999;
        font-size: 14px;
      }
    }

    .funnel-content {
      padding: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999999;
      font-size: 14px;

      .funnel-val {
        color: #333333;
        font-size: 36px;
        margin: 0 15px;
      }
    }
  }

  .plus-list {
    .rank {
      width: 24px;
      height: 24px;
      background: #E2E2E2;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      font-size: 12px;
    }

    p {
      margin: 0;
    }

    .ant-list {
      border: 2px solid rgba(238, 238, 238, 0.42);
    }
  }

  .date-button-group {
    display: grid;
    grid-template-columns: repeat(2, 82px);
    justify-content: space-between;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    position: absolute;
    top: 50px;
    right: 26px;
    z-index: 9;
    border: 2px solid rgba(238, 238, 238);
    padding: 20px;
    width: 219px;
    background: #ffffff
  }
}